import React from 'react';
import ReactDOM from 'react-dom';
let oldStr = '';
class Counter extends React.Component{
  constructor(props){
    super(props)
    // 第一个钩子函数
    this.state = {
      name:"珠峰"
    }
  }
  // static getDerivedStateFromProps(props,state){
  //   // props 从父组件传进来的数据  state是自己的数据
  //   console.log(props,state)
  //   // 可以把props 转到 state中
  //   // 把返回的对象合并到state中
  //   return {
  //     qqq:123,
  //     ...props
  //   }
  // }
  // componentWillMount(){
  //   // 对比成vue的beforeMounted  但是已经被废弃了
  //   // 若写的画 不能跟getDerivedStateFromProps 同时使用
  // }
  componentDidMount(){
    // 对比于vue的mounted
    // ajax请求的发送都是在这个钩子中进行的
  }
  // componentWillUpdate(){
  //   // 也被废除了
  // }
  componentDidUpdate(){
    // 类比于vue的upDated
  }
  componentWillUnmount(){
    // 类比于vue的beforeDestroy
    // 用来销毁定时器或者某些事件的
  }
  shouldComponentUpdate(nextProps,nextState){
    // 返回是一个true 那么 当前组件就更新
    // 返回一个 false  当前组件那就不更新
    // console.log(nextProps)
    if(nextProps.str === oldStr){
      return false
    }else{
      oldStr = nextProps.str
      return true
    }
  }
  render(){
    console.log('render counter')
    return <>
        <h3>{this.props.str}</h3>
    </>
  }
}

class App extends React.Component {
    state = {
      num:100
    }
    add = ()=>{
      this.setState({
        num:this.state.num+1
      })
    }
    render() {
        return <div className=''>
            <Counter str={this.state.num}/>
            <h1>{this.state.num}</h1>
            <button onClick={this.add}>+</button>
        </div>;
    }
}

ReactDOM.render(<App/>,document.getElementById('root'))